<template>
  <div class="div-box-card">
    <el-card class="box-card">
      <!-- 头部信息与新增试题按钮 -->
      <p class="ps">
        目前支持学科和关键字搜索
        <el-button type="success" size="mini" @click="$router.push('new')">
          <i class="el-icon-edit"></i>
          新增试题
        </el-button>
      </p>

      <!-- 表单区域 -->
      <el-form
        :inline="true"
        class="demo-form-inline"
        size="mini"
        ref="formData"
        :model="formData"
      >
        <div>
          <!-- 学科 -->
          <el-form-item label="学科" label-width="68px">
            <el-select
              placeholder="请选择"
              v-model="formData.subjectID"
              @change="formSubject(formData)"
            >
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="item in subject"
                :key="item.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <!-- 二级目录 -->
          <el-form-item label="二级目录">
            <el-select
              placeholder="请选择"
              v-model="formData.catalogID"
              @change="formTags(formData)"
            >
              <el-option
                :value="item.value"
                :label="item.label"
                v-for="item in formData.catalog"
                :key="item.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <!-- 标签 -->
          <el-form-item label="标签" label-width="68px">
            <el-select placeholder="请选择" v-model="formData.tagsId" multiple>
              <el-option
                :value="item.value"
                :label="item.label"
                v-for="item in formData.tags"
                :key="item.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <!-- 关键字 -->
          <el-form-item label="关键字" label-width="68px">
            <el-input
              placeholder="根据题干搜索"
              v-model="keyword"
              style="width: 200px"
            ></el-input>
          </el-form-item>
        </div>

        <div>
          <!-- 试题类型 -->
          <el-form-item label="试题类型">
            <el-select placeholder="请选择" v-model="formData.questionType">
              <el-option label="单选" value="1"></el-option>
              <el-option label="多选" value="2"></el-option>
              <el-option label="简答" value="3"></el-option>
            </el-select>
          </el-form-item>

          <!-- 难度 -->
          <el-form-item label="难度" label-width="68px">
            <el-select placeholder="请选择" v-model="formData.difficulty">
              <el-option label="简单" value="1"></el-option>
              <el-option label="一般" value="2"></el-option>
              <el-option label="复杂" value="3"></el-option>
            </el-select>
          </el-form-item>

          <!-- 方向 -->
          <el-form-item label="方向" label-width="68px">
            <el-select placeholder="请选择" v-model="formData.direction">
              <el-option
                v-for="(item, index) in direction"
                :key="index"
                :label="item"
                :value="index"
              ></el-option>
            </el-select>
          </el-form-item>

          <!-- 录入人 -->
          <el-form-item label="录入人" label-width="68px">
            <el-select placeholder="请选择" v-model="formData.creatorID">
              <el-option label="超级管理员" value="超级管理员"></el-option>
              <el-option label="录入管理员" value="录入管理员"></el-option>
            </el-select>
          </el-form-item>
        </div>

        <div>
          <!-- 题目备注 -->
          <el-form-item label="题目备注" prop="name">
            <el-input
              v-model="formData.remarks"
              style="width: 200px"
            ></el-input>
          </el-form-item>

          <!-- 企业简称 -->
          <el-form-item label="企业简称" prop="name" label-width="70px">
            <el-input
              v-model="formData.shortName"
              style="width: 200px"
            ></el-input>
          </el-form-item>

          <!-- 城市 -->
          <el-form-item label="城市" label-width="70px">
            <el-select
              placeholder="请选择"
              style="width: 97px"
              v-model="formData.province"
              @change="changeCitys"
            >
              <el-option
                v-for="(item, index) in isProvinces"
                :label="item"
                :value="item"
                :key="index"
              ></el-option>
            </el-select>

            <el-select
              placeholder="请选择"
              style="width: 97px"
              v-model="formData.city"
            >
              <el-option
                v-for="(item, index) in isCitys"
                :label="item"
                :value="item"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>

          <!-- 按钮 -->
          <el-form-item>
            <el-button @click="rem" style="margin-left: 76px">清除</el-button>
            <el-button type="primary" @click="getQuestionBank">搜索</el-button>
          </el-form-item>
        </div>
      </el-form>

      <!-- tab栏 -->
      <el-tabs
        v-model="activeName"
        type="card"
        @tab-click="cutClick(activeName)"
      >
        <!-- 全部 -->
        <el-tab-pane label="全部" name="first" >
          <!-- 全部的总条数 -->
          <el-alert
            :title="'数据一共' + total + '条'"
            type="info"
            show-icon
            :closable="fa"
          >
          </el-alert>
          <!-- 全部的表格 -->
          <el-table style="width: 100%" :data="tabData" v-loading="loading">
            <!-- 试题编号 -->
            <el-table-column prop="number" label="试题编号" width="120">
            </el-table-column>

            <!-- 学科 -->
            <el-table-column prop="subject" label="学科" width="120">
            </el-table-column>

            <!-- 目录 -->
            <el-table-column prop="catalog" label="目录" width="120">
            </el-table-column>

            <!-- 题型 -->
            <el-table-column
              prop="questionType"
              label="题型"
              width="120"
              :formatter="formatquestion"
            >
            </el-table-column>

            <!-- 题干 -->
            <el-table-column prop="question" label="题干" width="170">
              <template #default="{ row }">
                <span v-html="row.question"></span>
              </template>
            </el-table-column>

            <!-- 录入时间 -->
            <el-table-column prop="addDate" label="录入时间" width="170">
              <template #default="{ row }">
                {{ row.addDate | formatDate('YYYY/MM/DD') }}
              </template>
            </el-table-column>

            <!-- 难度 -->
            <el-table-column
              :formatter="formatdifficulty"
              prop="difficulty"
              label="难度"
              width="120"
            >
            </el-table-column>

            <!-- 录入人 -->
            <el-table-column prop="creator" label="录入人" width="120">
            </el-table-column>

            <!-- 审核状态 -->
            <el-table-column
              prop="chkState"
              :formatter="isverify"
              label="审核状态"
              width="120"
            >
            </el-table-column>

            <!-- 审核意见 -->
            <el-table-column prop="chkRemarks" label="审核意见" width="120">
            </el-table-column>

            <!-- 审核人 -->
            <el-table-column prop="chkUser" label="审核人" width="120">
            </el-table-column>

            <!-- 发布状态 -->
            <el-table-column label="发布状态" width="120">
              <template #default="{ row }">
                {{ issueState(row) }}
              </template>
            </el-table-column>

            <el-table-column label="操作" fixed="right" width="250">
              <template #default="{ row }">
                <!-- 预览 -->
                <el-link
                  type="primary"
                  circle
                  size="small"
                  @click="topicPreview(row)"
                  style="margin: 8px"
                  >预览</el-link
                >
                <!-- 审核 -->
                <el-link
                  type="info"
                  circle
                  size="small"
                  style="margin: 8px"
                  v-if="row.chkState !== 0"
                  disabled
                  >审核</el-link
                >
                <el-link
                  type="primary"
                  circle
                  size="small"
                  style="margin: 8px"
                  v-else
                  @click="audit(row)"
                  >审核</el-link
                >
                <!-- 修改 -->
                <el-link
                  type="info"
                  circle
                  size="small"
                  v-if="row.publishState === 0 && row.chkState !== 2"
                  style="margin: 8px"
                  disabled
                  >修改</el-link
                >
                <el-link
                  type="primary"
                  circle
                  size="small"
                  v-else
                  style="margin: 8px"
                  @click="amend(row)"
                  >修改</el-link
                >
                <!-- 上架 -->
                <el-link
                  type="primary"
                  circle
                  size="small"
                  style="margin: 8px"
                  @click="onTheShelves(row)"
                  >{{
                    row.publishState === 1 || row.chkState === 2
                      ? '上架'
                      : '下架'
                  }}</el-link
                >
                <!-- 删除 -->
                <el-link
                  type="info"
                  circle
                  size="small"
                  style="margin: 8px"
                  v-if="row.publishState === 0 && row.chkState !== 2"
                  disabled
                  >删除</el-link
                >
                <el-link
                  type="primary"
                  circle
                  size="small"
                  style="margin: 8px"
                  v-else
                  @click="del(row)"
                  >删除</el-link
                >
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <!-- 待审核 -->
        <el-tab-pane label="待审核" name="second" >
          <!-- 全部的总条数 -->
          <el-alert
            :title="'数据一共' + total + '条'"
            type="info"
            show-icon
            :closable="fa"
          >
          </el-alert>

          <!-- 待审核的表格 -->
          <el-table style="width: 100%" :data="tabData" v-loading="loading">
            <!-- 试题编号 -->
            <el-table-column prop="number" label="试题编号" width="120">
            </el-table-column>

            <!-- 学科 -->
            <el-table-column prop="subject" label="学科" width="120">
            </el-table-column>

            <!-- 目录 -->
            <el-table-column prop="catalog" label="目录" width="120">
            </el-table-column>

            <!-- 题型 -->
            <el-table-column
              prop="questionType"
              label="题型"
              width="120"
              :formatter="formatquestion"
            >
            </el-table-column>

            <!-- 题干 -->
            <el-table-column prop="question" label="题干" width="170">
              <template #default="{ row }">
                <span v-html="row.question"></span>
              </template>
            </el-table-column>

            <!-- 录入时间 -->
            <el-table-column prop="addDate" label="录入时间" width="170">
              <template #default="{ row }">
                {{ row.addDate | formatDate('YYYY/MM/DD') }}
              </template>
            </el-table-column>

            <!-- 难度 -->
            <el-table-column
              :formatter="formatdifficulty"
              prop="difficulty"
              label="难度"
              width="120"
            >
            </el-table-column>

            <!-- 录入人 -->
            <el-table-column prop="creator" label="录入人" width="120">
            </el-table-column>

            <!-- 审核状态 -->
            <el-table-column
              prop="chkState"
              :formatter="isverify"
              label="审核状态"
              width="120"
            >
            </el-table-column>

            <!-- 审核意见 -->
            <el-table-column prop="chkRemarks" label="审核意见" width="120">
            </el-table-column>

            <!-- 审核人 -->
            <el-table-column prop="chkUser" label="审核人" width="120">
            </el-table-column>

            <!-- 发布状态 -->
            <el-table-column label="发布状态" width="120">
              <template #default="{ row }">
                {{ issueState(row) }}
              </template>
            </el-table-column>

            <el-table-column label="操作" fixed="right" width="250">
              <template #default="{ row }">
                <!-- 预览 -->
                <el-link
                  type="primary"
                  circle
                  size="small"
                  @click="topicPreview(row)"
                  style="margin: 8px"
                  >预览</el-link
                >
                <!-- 审核 -->
                <el-link
                  type="info"
                  circle
                  size="small"
                  style="margin: 8px"
                  v-if="row.chkState !== 0"
                  disabled
                  >审核</el-link
                >
                <el-link
                  type="primary"
                  circle
                  size="small"
                  style="margin: 8px"
                  v-else
                  @click="audit(row)"
                  >审核</el-link
                >
                <!-- 修改 -->
                <el-link
                  type="info"
                  circle
                  size="small"
                  v-if="row.publishState === 0 && row.chkState !== 2"
                  style="margin: 8px"
                  disabled
                  >修改</el-link
                >
                <el-link
                  type="primary"
                  circle
                  size="small"
                  v-else
                  style="margin: 8px"
                  @click="amend(row)"
                  >修改</el-link
                >
                <!-- 上架 -->
                <el-link
                  type="primary"
                  circle
                  size="small"
                  style="margin: 8px"
                  @click="onTheShelves(row)"
                  >{{
                    row.publishState === 1 || row.chkState === 2
                      ? '上架'
                      : '下架'
                  }}</el-link
                >
                <!-- 删除 -->
                <el-link
                  type="info"
                  circle
                  size="small"
                  style="margin: 8px"
                  v-if="row.publishState === 0 && row.chkState !== 2"
                  disabled
                  >删除</el-link
                >
                <el-link
                  type="primary"
                  circle
                  size="small"
                  style="margin: 8px"
                  v-else
                  @click="del(row)"
                  >删除</el-link
                >
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <!-- 已审核 -->
        <el-tab-pane label="已审核" name="third" >
          <!-- 全部的总条数 -->
          <el-alert
            :title="'数据一共' + total + '条'"
            type="info"
            show-icon
            :closable="fa"
          >
          </el-alert>

          <!-- 已审核的表格 -->
          <el-table style="width: 100%" :data="tabData" v-loading="loading">
            <!-- 试题编号 -->
            <el-table-column prop="number" label="试题编号" width="120">
            </el-table-column>

            <!-- 学科 -->
            <el-table-column prop="subject" label="学科" width="120">
            </el-table-column>

            <!-- 目录 -->
            <el-table-column prop="catalog" label="目录" width="120">
            </el-table-column>

            <!-- 题型 -->
            <el-table-column
              prop="questionType"
              label="题型"
              width="120"
              :formatter="formatquestion"
            >
            </el-table-column>

            <!-- 题干 -->
            <el-table-column prop="question" label="题干" width="170">
              <template #default="{ row }">
                <span v-html="row.question"></span>
              </template>
            </el-table-column>

            <!-- 录入时间 -->
            <el-table-column prop="addDate" label="录入时间" width="170">
              <template #default="{ row }">
                {{ row.addDate | formatDate('YYYY/MM/DD') }}
              </template>
            </el-table-column>

            <!-- 难度 -->
            <el-table-column
              :formatter="formatdifficulty"
              prop="difficulty"
              label="难度"
              width="120"
            >
            </el-table-column>

            <!-- 录入人 -->
            <el-table-column prop="creator" label="录入人" width="120">
            </el-table-column>

            <!-- 审核状态 -->
            <el-table-column
              prop="chkState"
              :formatter="isverify"
              label="审核状态"
              width="120"
            >
            </el-table-column>

            <!-- 审核意见 -->
            <el-table-column prop="chkRemarks" label="审核意见" width="120">
            </el-table-column>

            <!-- 审核人 -->
            <el-table-column prop="chkUser" label="审核人" width="120">
            </el-table-column>

            <!-- 发布状态 -->
            <el-table-column label="发布状态" width="120">
              <template #default="{ row }">
                {{ issueState(row) }}
              </template>
            </el-table-column>

            <el-table-column label="操作" fixed="right" width="250">
              <template #default="{ row }">
                <!-- 预览 -->
                <el-link
                  type="primary"
                  circle
                  size="small"
                  @click="topicPreview(row)"
                  style="margin: 8px"
                  >预览</el-link
                >
                <!-- 审核 -->
                <el-link
                  type="info"
                  circle
                  size="small"
                  style="margin: 8px"
                  v-if="row.chkState !== 0"
                  disabled
                  >审核</el-link
                >
                <el-link
                  type="primary"
                  circle
                  size="small"
                  style="margin: 8px"
                  v-else
                  @click="audit(row)"
                  >审核</el-link
                >
                <!-- 修改 -->
                <el-link
                  type="info"
                  circle
                  size="small"
                  v-if="row.publishState === 0 && row.chkState !== 2"
                  style="margin: 8px"
                  disabled
                  >修改</el-link
                >
                <el-link
                  type="primary"
                  circle
                  size="small"
                  v-else
                  style="margin: 8px"
                  @click="amend(row)"
                  >修改</el-link
                >
                <!-- 上架 -->
                <el-link
                  type="primary"
                  circle
                  size="small"
                  style="margin: 8px"
                  @click="onTheShelves(row)"
                  >{{
                    row.publishState === 1 || row.chkState === 2
                      ? '上架'
                      : '下架'
                  }}</el-link
                >
                <!-- 删除 -->
                <el-link
                  type="info"
                  circle
                  size="small"
                  style="margin: 8px"
                  v-if="row.publishState === 0 && row.chkState !== 2"
                  disabled
                  >删除</el-link
                >
                <el-link
                  type="primary"
                  circle
                  size="small"
                  style="margin: 8px"
                  v-else
                  @click="del(row)"
                  >删除</el-link
                >
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <!-- 已拒绝 -->
        <el-tab-pane label="已拒绝" name="fourth" >
          <!-- 全部的总条数 -->
          <el-alert
            :title="'数据一共' + total + '条'"
            type="info"
            show-icon
            :closable="fa"
          >
          </el-alert>

          <!-- 已拒绝的表格 -->
          <el-table style="width: 100%" :data="tabData" v-loading="loading">
            <!-- 试题编号 -->
            <el-table-column prop="number" label="试题编号" width="120">
            </el-table-column>

            <!-- 学科 -->
            <el-table-column prop="subject" label="学科" width="120">
            </el-table-column>

            <!-- 目录 -->
            <el-table-column prop="catalog" label="目录" width="120">
            </el-table-column>

            <!-- 题型 -->
            <el-table-column
              prop="questionType"
              label="题型"
              width="120"
              :formatter="formatquestion"
            >
            </el-table-column>

            <!-- 题干 -->
            <el-table-column prop="question" label="题干" width="170">
              <template #default="{ row }">
                <span v-html="row.question"></span>
              </template>
            </el-table-column>

            <!-- 录入时间 -->
            <el-table-column prop="addDate" label="录入时间" width="170">
              <template #default="{ row }">
                {{ row.addDate | formatDate('YYYY/MM/DD') }}
              </template>
            </el-table-column>

            <!-- 难度 -->
            <el-table-column
              :formatter="formatdifficulty"
              prop="difficulty"
              label="难度"
              width="120"
            >
            </el-table-column>

            <!-- 录入人 -->
            <el-table-column prop="creator" label="录入人" width="120">
            </el-table-column>

            <!-- 审核状态 -->
            <el-table-column
              prop="chkState"
              :formatter="isverify"
              label="审核状态"
              width="120"
            >
            </el-table-column>

            <!-- 审核意见 -->
            <el-table-column prop="chkRemarks" label="审核意见" width="120">
            </el-table-column>

            <!-- 审核人 -->
            <el-table-column prop="chkUser" label="审核人" width="120">
            </el-table-column>

            <!-- 发布状态 -->
            <el-table-column label="发布状态" width="120">
              <template #default="{ row }">
                {{ issueState(row) }}
              </template>
            </el-table-column>

            <el-table-column label="操作" fixed="right" width="250">
              <template #default="{ row }">
                <!-- 预览 -->
                <el-link
                  type="primary"
                  circle
                  size="small"
                  @click="topicPreview(row)"
                  style="margin: 8px"
                  >预览</el-link
                >
                <!-- 审核 -->
                <el-link
                  type="info"
                  circle
                  size="small"
                  style="margin: 8px"
                  v-if="row.chkState !== 0"
                  disabled
                  >审核</el-link
                >
                <el-link
                  type="primary"
                  circle
                  size="small"
                  style="margin: 8px"
                  v-else
                  @click="audit(row)"
                  >审核</el-link
                >
                <!-- 修改 -->
                <el-link
                  type="info"
                  circle
                  size="small"
                  v-if="row.publishState === 0 && row.chkState !== 2"
                  style="margin: 8px"
                  disabled
                  >修改</el-link
                >
                <el-link
                  type="primary"
                  circle
                  size="small"
                  v-else
                  style="margin: 8px"
                  @click="amend(row)"
                  >修改</el-link
                >
                <!-- 上架 -->
                <el-link
                  type="primary"
                  circle
                  size="small"
                  style="margin: 8px"
                  @click="onTheShelves(row)"
                  >{{
                    row.publishState === 1 || row.chkState === 2
                      ? '上架'
                      : '下架'
                  }}</el-link
                >
                <!-- 删除 -->
                <el-link
                  type="info"
                  circle
                  size="small"
                  style="margin: 8px"
                  v-if="row.publishState === 0 && row.chkState !== 2"
                  disabled
                  >删除</el-link
                >
                <el-link
                  type="primary"
                  circle
                  size="small"
                  style="margin: 8px"
                  v-else
                  @click="del(row)"
                  >删除</el-link
                >
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>

      <!-- 全部的分页 -->
      <div style="height: 60px; margin-top: 10px">
        <el-pagination
          :total="total"
          :current-page="tabToggle.page"
          :page-sizes="[5, 7, 8, 10]"
          :page-size="tabToggle.pagesize"
          layout="->,total, sizes, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          background
        />
      </div>
    </el-card>

    <!-- 预览的dialog -->
    <el-dialog
      title="题目预览"
      :visible.sync="dialogVisible"
      width="55%"
      :before-close="handleClose"
      @closed="particulars = {}"
    >
      <div>
        <el-row>
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              【题型】：{{ diaQuestionType(particulars.questionType) }}
            </div></el-col
          >
          <el-col :span="6"
            ><div class="grid-content bg-purple-light">
              【编号】：{{ particulars.id }}
            </div></el-col
          >
          <el-col :span="6"
            ><div class="grid-content bg-purple"></div>
            【难度】：{{ diadifficulty(particulars.difficulty) }}</el-col
          >
          <el-col :span="6"
            ><div class="grid-content bg-purple-light">
              【标签】：{{ particulars.tags }}
            </div></el-col
          >
        </el-row>

        <el-row>
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              【学科】：{{ particulars.subjectName }}
            </div></el-col
          >
          <el-col :span="6"
            ><div class="grid-content bg-purple-light">
              【目录】：{{ particulars.directoryName }}
            </div></el-col
          >
          <el-col :span="6"
            ><div class="grid-content bg-purple"></div>
            【方向】：{{ particulars.direction }}</el-col
          >
        </el-row>
      </div>
      <el-divider></el-divider>
      <!-- 题干 -->
      <div>
        <p>【题干】：</p>
        <p v-html="particulars.question"></p>
        <p>
          {{
            diaQuestionType(particulars.questionType)
          }}
          选项：（以下选中的选项为正确答案）
        </p>
        <p v-if="particulars.questionType === '1'">
          <el-row
            v-for="item in particulars.options"
            :key="item.id"
            style="height: 52px; width: 300px; line-height: 50px"
          >
            <el-radio
              style="display: inline-block"
              label-width="200px"
              :label="item.title"
              :value="item.isRight === 1 ? item.title : ''"
            ></el-radio>
            <img
              style="height: 50px; vertical-align: middle; float: right"
              v-if="item.img"
              :src="item.img"
              alt=""
               @click="magnify(item.img)"
            />
          </el-row>
        </p>
        <p v-if="particulars.questionType === '2'">
          <el-row
            v-for="k in particulars.options"
            :key="k.id"
            style="height: 52px; width: 300px; line-height: 50px"
          >
            <el-checkbox
              style="display: inline-block"
              label-width="200px"
              :label="k.title"
              :value="k.isRight === 1 ? true : false"
            ></el-checkbox>
            <img
              v-if="k.img"
              style="height: 50px; vertical-align: middle; float: right"
              :src="k.img"
              alt=""
              @click="magnify(k.img)"
            />
          </el-row>
        </p>
      </div>
      <el-divider></el-divider>
      <!-- 视频答案 -->
      <div>
        <p>
          【参考答案】：<el-button
            type="danger"
            size="small"
            v-model="isState"
            @click="isState = true"
            >视频答案预览</el-button
          >
        </p>
        <!-- 视频  -->
        <video width="420" height="200" controls autoplay v-if="isState">
          <source src="../../assets/MP4/myy.mp4" />
          <object data="movie.mp4" width="320" height="240">
            <!-- <embed width="420" height="200" src="particulars.videoURL"> -->
          </object>
        </video>
      </div>
      <el-divider></el-divider>
      <!-- 答案解析 -->
      <p>【答案解析】：<span v-html="particulars.answer"></span></p>
      <el-divider></el-divider>
      <!-- 答案备注 -->
      <p>【题目备注】：{{ particulars.remarks }}</p>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleClose">关闭</el-button>
      </span>
    </el-dialog>

<!-- 放大图片的dialog -->
<el-dialog
  title="提示"
  :visible.sync="dialogMagnify"
  width="25%"
  :before-close="handleCloseMagnify">
  <img :src="img" alt="" style="width:400px;height:300px">
</el-dialog>

    <!--  点击审核的dialog -->
    <el-dialog
      title="题目审核"
      :visible.sync="dialogChkState"
      width="30%"
      :before-close="handleCloseChkState"
    >
      <el-radio-group v-model="subRow.chkState">
        <el-radio :label="1">通过</el-radio>
        <el-radio :label="2">拒绝</el-radio>
      </el-radio-group>
      <el-input
        type="textarea"
        v-model.trim="subRow.chkRemarks"
        placeholder="请输入审核意见"
      ></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogChkState = false">取 消</el-button>
        <el-button type="primary" @click="subAudit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
//  获取精选题库列表，获取题目详情  提交审核  上架下架  移出精选
import {
  choice,
  detail,
  choiceCheck,
  choicePublish,
  choiceAdd
} from '../../api/hmmm/questions'
//  获取简单学科列表
import { simple } from '../../api/hmmm/subjects'
//  方向  题型  难度  审核状态
import {
  direction,
  questionType,
  difficulty,
  chkType
} from '../../api/hmmm/constants'
// 城市
import { provinces, citys } from '../../api/hmmm/citys'
//  获取 简单目录
import { simple as ajaxDetail } from '../../api/hmmm/directorys'
//  获取 简单标签
import { simple as ajaxTags } from '../../api/hmmm/tags'
export default {
  data () {
    return {
      loading: false,
      // isSubject: '', // 显示学科列表
      activeName: 'first', // tab栏切换
      subject: [], // 学科简单列表
      direction, //  方向的常量
      questionType, // 题型的常量
      difficulty, // 题型的常量
      chkType, // 审核状态的常量
      // 用于提交审核
      subRow: {
        chkState: 1, // 审核状态
        chkRemarks: '', // 审核意见
        id: 0
      },
      isProvinces: [], // 城市
      isCitys: [], // 城市下地区
      fa: false,
      total: 0, // 总数
      dialogVisible: false, // 预览的dialog
      dialogChkState: false, // 审核的dialog
      particulars: {}, // 文章详情
      isState: false, // 显示视频
      dialogMagnify: false, // 放大图片
      img: '', // 图片地址

      //  搜索的参数
      seekarg: {
        page: 1,
        pagesize: 5
      },

      //  分页状态
      tabToggle: {
        page: 1,
        pagesize: 5
      },
      chkState: '', //  审核状态状态
      keyword: '', //  关键字

      formData: {
        subjectID: '', // 学科
        catalog: [], // 二级目录
        catalogID: '', // 二级目录的id
        tagsId: '',
        tags: [], //  标签

        questionType: '', //  试题类型
        difficulty: '', //  难度
        direction: '', //  方向
        creatorID: '', // 录入人
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        province: '', // 所在市
        city: '' // 所在县
      },
      isAllTabData: [], // 所有数据
      // 当前页数据
      tabData: [
        {
          addDate: '2020-05-05T09:12:52.000Z', // 时间
          answer: '<p>无</p>', // 答案解析
          catalog: 'css基础',
          catalogID: 5, // 目录
          city: '和平区', // 所在县
          creator: '超级管理员', // 录入人
          creatorID: 2,
          difficulty: '1',
          direction: '企业服务', //  方向
          enterprise: '美团', // 企业
          enterpriseID: 12,
          id: 29,
          number: 'ck9tp300z0001kwo5hztbh95s', // 试题编号
          question: '<p>1+1等于几？</p>', // 题干
          questionType: '1', // 题型
          remarks: '无', //  题目备注
          subject: '前端', //  学科
          subjectID: 4, //
          tags: 'css3,bfc', //  试题标签
          chkState: 1, // 审核状态
          chkRemarks: '', // 审核意见
          chkUser: '', // 审核人
          publishState: 0 // 上下架
        }
      ]
    }
  },

  created () {
    // 调用获取学科简单列表的函数
    this.subjectPlain()
    //  调用获取题库列表的函数
    this.getQuestionBank()
    //   获取城市
    this.isProvinces = provinces()
  },

  methods: {

    // 定义获取学科简单列表的函数
    async subjectPlain () {
      const { data } = await simple()
      this.subject = data
    },

    // 选择学科后获取目录列表
    async formSubject (item) {
      const { data } = await ajaxDetail(item)
      this.formData.catalog = data
      this.formData.catalogID = ''
      this.formData.tagsId = ''
    },

    // x选择目录后获取标签列表
    async formTags (item) {
      const { data } = await ajaxTags(item)
      this.formData.tags = data
    },

    // 获取城市下地区
    changeCitys (city) {
      this.isCitys = citys(city)
    },

    // 定义获取精选题库列表的函数
    async getQuestionBank () {
      this.loading = true
      //  定义一个对象，装着发送请求一定要的数据 page pagesize
      const obj = { ...this.tabToggle }
      //  审核状态不为全部
      if (this.chkState !== '') {
        // 动态加入 obj
        obj.chkState = this.chkState
      }
      //  学科不为空
      if (this.formData.subjectID !== '') {
        // 动态加入 obj
        obj.subjectID = this.formData.subjectID
      }
      //  关键字不为空
      if (this.keyword !== '') {
        // 动态加入 obj
        obj.keyword = this.keyword
      }
      const { data } = await choice(obj)
      // 当前页所有数据
      this.tabData = data.items
      //  总长度
      this.total = data.counts
      this.loading = false
    },

    // 清空表单
    rem () {
      this.formData = {
        subjectID: '', // 学科
        catalogID: '', // 二级目录
        tags: '', //  标签
        keyword: '', //  关键字
        questionType: '', //  试题类型
        difficulty: '', //  难度
        direction: '', //  方向
        creatorID: '', // 录入人
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        province: '', // 所在市
        city: '' // 所在县
      }
      this.keyword = ''
    },

    //  每页多少条
    handleSizeChange (size) {
      this.tabToggle.pagesize = size
      // 跳转到第一页
      this.tabToggle.page = 1
      // 刷新页面
      this.getQuestionBank()
    },

    //  下一页
    handleCurrentChange (page) {
      this.tabToggle.page = page
      this.getQuestionBank()
    },

    // 点击预览
    async topicPreview (row) {
      this.dialogVisible = true
      // 获取题目详情
      const { data } = await detail(row)
      this.particulars = data
    },

    // 关闭预览的dialog
    handleClose () {
      // this.particulars = {}
      this.dialogVisible = false
      // 关闭视频
      this.isState = false
    },

    // 放大图片
    magnify (img) {
      this.img = img
      this.dialogMagnify = true
    },

    //  关闭放大图片
    handleCloseMagnify () {
      this.dialogMagnify = false
    },

    // 点击审核
    audit (row) {
      //  赋值给一个新变量，用于提交审核
      this.subRow.id = row.id
      this.dialogChkState = true
    },

    // 提交审核
    async subAudit () {
      if (this.subRow.chkRemarks === '') { return this.$message.warning('请填写意见') }
      try {
        await choiceCheck(this.subRow)
        //  关闭dialog
        this.dialogChkState = false
        this.$message.success('操作成功')
        this.subRow.chkRemarks = ''
      } catch (erroe) {}
      // 刷新页面
      this.getQuestionBank()
    },

    // 关闭审核的dialog
    handleCloseChkState () {
      this.dialogChkState = false
    },

    // 修改
    amend (row) {
      this.$router.push({
        path: 'new',
        query: {
          id: row.id
        }
      })
    },

    // 上架下架
    async onTheShelves (row) {
      try {
        await this.$confirm('您确认上架这道题目吗?', '提示')
        //  创建一个空对象，用于发送请求时传参
        const putaway = {}
        //  获取需要上架的id
        putaway.id = row.id
        //  获取提交的上架状态
        if (row.publishState === 1) {
          row.publishState = 0
        } else {
          row.publishState = 1
        }
        //  赋值上架状态
        putaway.publishState = row.publishState
        //  发送上下架请求
        await choicePublish(putaway)
        // 提示
        this.$message.success(`${row.publishState === 1 ? '下架' : '上架'}成功`)
        // 刷新页面
        this.getQuestionBank()
      } catch (error) {
        console.log(error)
      }
    },

    // 删除
    async del (row) {
      try {
        await this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', { type: 'warning' })
        // 发送请求的参数
        const delInfo = {
          id: row.id,
          choiceState: 0
        }
        //  调用删除接口
        await choiceAdd(delInfo)
        // 提示
        this.$message.success('删除成功')
        // 刷新页面
        this.getQuestionBank()
      } catch (error) {
        console.log(error)
      }
    },
    // 格式化  题型
    formatquestion (row, column, cellValue, index) {
      const res = questionType.find((item) => item.value === +cellValue)
      return res ? res.label : '未知'
    },

    // 格式化难度
    formatdifficulty (row, column, cellValue, index) {
      const res = difficulty.find((item) => item.value === +cellValue)
      return res ? res.label : '未知'
    },

    // 格式化 发布状态
    issueState (row) {
      if (row.publishState === 1 || row.chkState === 2) {
        return '已下架'
      }
      if (row.chkState !== 1) {
        return '待发布'
      } else {
        return '已发布'
      }
    },

    // 格式化  审核状态
    isverify (row, column, cellValue, index) {
      const res = chkType.find((item) => item.value === +cellValue)
      return res ? res.label : '未知'
    },

    // 格式化
    diaQuestionType (k) {
      const res = questionType.find((item) => item.value === +k)
      return res ? res.label : '未知'
    },

    // 格式化
    diadifficulty (k) {
      const res = difficulty.find((item) => item.value === +k)
      return res ? res.label : '未知'
    },

    // 切换tab栏
    cutClick (tactiveName) {
      //  获取所有精选题目
      if (tactiveName === 'first') {
        this.chkState = ''
      }

      //  获取待审核的精选题目
      if (tactiveName === 'second') {
        this.chkState = 0
      }

      //  获取已审核的精选题目
      if (tactiveName === 'third') {
        this.chkState = 1
      }

      //  获取已拒绝的精选题目
      if (tactiveName === 'fourth') {
        this.chkState = 2
      }
      //  每次切换tab都回到第一页
      this.tabToggle.page = 1
      //  刷新页面
      this.getQuestionBank()
    }
  }
}
</script>

<style scoped lang="css">
.div-box-card {
  padding: 20px;
}
.ps {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #ffc5da;
  font-size: 12px;
}

i .el-icon-view {
  font-size: 20px !important;
}

img {
  width: 50px;
  height: 30px;
}

::v-deep .el-alert--info {
  margin-bottom: 15px;
}

::v-deep .el-pagination {
  margin-top: 15px;
}
</style>
